import React from 'react';
import { Anchor } from 'choerodon-ui';
import style from './index.less';

const { Link } = Anchor;

const AnchorBasic: React.FC = () => {
  // 需要根据实际工程进行调整
  const container = (document.getElementsByClassName('ant-layout-content')[0] as HTMLElement);
  return (
    <div className={style.wrapper}>
      <div className={style['content-wrapper']}>
        <div className={style.interval} />
        <h1 className={style.content} id="a1">a1</h1>
        <h1 className={style.content} id="a2">a2</h1>
        <h1 className={style.content} id="a3">a3</h1>
        <h1 className={style.content} id="a4">a4</h1>
      </div>
      <div>
        <Anchor className={style['anchor-wrapper']} getContainer={() => container}>
          <Link href="#a1" title="a1" />
          <Link href="#a2" title="a2" />
          <Link href="#a3" title="a3">
            <Link href="#a4" title="a4" />
          </Link>
        </Anchor>
      </div>
    </div>
  );
};

export default AnchorBasic;